<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>本地服务商家</title>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/layer/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/share.css"/>
    <style type="text/css">
        /* 本例子css */
        .appearance {
            background-color: #F0F0F0;
            width: 100%;
            height: 0.2%;
        }
    </style>
</head>

<body>
<div id="slideBox" class="slideBox">
    <%--<div class="hd">--%>
    <%--<ul>--%>
    <%--<!--<c:forEach items="${map.picture}" var="image">-->--%>
    <%--<li></li>--%>
    <%--<!--</c:forEach>-->--%>
    <%--</ul>--%>
    <%--</div>--%>
    <div class="bd">
        <ul>
            <!--<c:forEach items="${map.picture}" var="picture">-->
            <li><img src="http://www.taoshunda.com/images/${picture}"/></li>
            <!--</c:forEach>-->
        </ul>
    </div>
</div>
<div style="width: 100%;margin-top: 2%;margin-left: 3%">
    <span>${map.waiterName}</span>
</div>
<%--margin-bottom: 2%--%>
<div style="width: 100%;">
    <div>
        <ul class="public-overflow favorable-box">
            <div style="float: left;margin-left: 3%">
                <li class="favorable-title">
                    <c:forEach var="i" begin="1" end="5">
                    <c:if test="${map.star>=i}">
                <li class=" favorable-title public-color-ten public-font-seven public-left"><img
                        src="${path}/static/taoshunda/share/images/star_orange_small.png" height="20" width="80%"
                        alt=""/>
                </li>

                </c:if>
                <c:if test="${map.star<i}">
                    <li class=" favorable-title public-color-ten public-font-seven public-left"><img
                            src="${path}/static/taoshunda/share/images/star_gray_small.png" height="20" width="80%"
                            alt=""/>
                    </li>
                </c:if>
                </li>
                </c:forEach>

            </div>
            <div style="float: right">
                <li class="favorable-title public-color-ten public-font-seven public-right">${map.star}.0分</li>
            </div>
            <%--<li class="favorable-title">${map.waiterAdress}</li>--%>
        </ul>
    </div>
    <div style="float: left;margin-left: 3%">
        <span>联系人:${map.phoneName}</span>
    </div>
</div>
<div style="margin-top: 0.5%;width: 100%">
    <div class="appearance" style="margin-top: 10%">

    </div>
    <div style="margin-bottom: 2%;margin-top: 2%">
        <span style="margin-left: 3%">联系电话:${map.phone}</span>
    </div>
    <div class="appearance">

    </div>
</div>
<div class="public-left area-type public-padding" style="width: 100%;margin-top: 1%;">
    <span class="public-left">${map.waiterAdress}</span>
</div>
<div style=" background-color: #F0F0F0;width: 100%;height: 1.5%;margin-top: 12%">

</div>
<div style="margin-bottom: 50px">
    <div>
        <span style="margin-left: 3%;">服务简介</span>
    </div>
    <div class="area-type">
        ${map.remark}
    </div>
</div>

<div style="width: 100%; line-height:50px;background: #FF6D13;text-align: center;position: fixed;bottom: 0;left:0;font-size: 16px;">
    <a href="http://www.taoshunda.com/setup/user.html" id="link" style="color: #ffffff;">点击下载淘瞬达app，淘您所爱 一瞬即达</a>
</div>


</body>

</html>
<script type="text/javascript">
    $(function () {
        jQuery(".slideBox").slide({
            mainCell: ".bd ul",
            autoPlay: true
        });
        jQuery(".picMarquee-left").slide({
            mainCell: ".bd ul",
            autoPlay: true,
            effect: "leftMarquee",
            vis: 5,
            interTime: 50,
            trigger: "click"
        });
    })
    $(document).on("click", ".img img", function () {
        var imgSrc = $(this).attr('src');
        DisplayPicture(imgSrc);
    });

    function DisplayPicture(val) {
        if (val != 'null' && typeof(val) != "undefined" && val != 0 && val != null) {
            var json = {
                "title": "", // 相册标题
                "id": 1, // 相册id
                "data": [ // 相册包含的图片，数组格式
                    {
                        "alt": "图片名",
                        "src": val, // 原图地址
                    },
                ],
            };
            layer.photos({
                photos: json,
                moveType: 1,
                closeBtn: [0, true],
            });
        } else {
            $.messager.alert('提示', '该图片不存在', 'error');
        }
    }

    document.getElementById("btn").onclick = function () {
        document.getElementById("link").click();
    }
</script>
